<template>
  <ry-modal title="新增会员卡" v-model="visible" destroyOnClose :maskClosable="false"
    :confirmLoading="confirmLoading" @ok="applyProjectOk">
    <a-spin :spinning="confirmLoading">
      <a-form-model :model="form" :rules="rules" v-bind="modelConfig">
        <a-row :gutter="[24,0]">
          <a-col :span="24" style="font-weight: 600;margin-bottom: 10px;margin-left: 20px">
            <span style="background-color:#3acaca;margin-right: 4px">&nbsp</span>会员卡列表
          </a-col>
          <a-col :span="24">
            <a-form-model-item :labelCol="{span:2}" :wrapperCol="{span:22}">
              <a-row style="margin-left: 30px;margin-top: 20px;">
                <a-radio-group v-model="form.memberCardId" style="width: 100%;" @change="onChangeMemberCardIds">
                  <a-col :span="8" v-for="item in memberCardList" :key="item.id" style="margin-bottom: 20px;">
                    <a-radio style="color: #25a8a7" :value="item.id">{{ item.cardName }}</a-radio>
                  </a-col>
                </a-radio-group>
              </a-row>
            </a-form-model-item>
          </a-col>
          <a-col :span="24" style="font-weight: 600;margin-bottom: 10px;margin-left: 20px">
            <span style="background-color:#3acaca;margin-right: 4px">&nbsp</span>会员卡信息
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="产品总价值">
              <span style="color: #25a8a7">{{memberCardInfo.totalPrice}} 万/年</span>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="会员活动价" prop="activityPrice">
              <span style="color: #25a8a7">{{memberCardInfo.activityPrice}} 万/年</span>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-table bordered :data-source="memberCardInfo.projects" :columns="columns">
              <template slot="projectName" slot-scope="text, record">
                <spam>{{$getDictName('APPLY_PROJECT', record.projectName)}}</spam>
              </template>
              <template slot="projectPrice" slot-scope="text, record">
                <span>{{record.projectPrice}} 元</span>
              </template>
              <template slot="quantity" slot-scope="text, record">
                <span>{{record.quantity}}</span>
              </template>
            </a-table>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="会员卡生效时间" prop="beginTime">
              <a-date-picker style="width: 100%" v-model="form.beginTime" placeholder="请选择开始时间" @change="onChangeBirth" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </ry-modal>
</template>

<script>
export default {
  name: 'ces',
  mixins: [],
  components: { },
  props: ['account'],
  data () {
    return {
      visible: false,
      confirmLoading: false,
      type: '1',
      form: {
        memberCardId: ''
      },
      rules: {
        beginTime: [
          { required: true, message: '请输入会员生效时间' }
        ],
      },
      memberCardInfo: {},
      memberCardList: '',
      modelConfig: {
        ref: 'ruleForm',
        labelCol: { span: 6 },
        wrapperCol: { span: 14 }
      },
      columns: [
        {
          title: '项目名称',
          dataIndex: 'projectName',
          width: '30%',
          scopedSlots: { customRender: 'projectName' },
        },
        {
          title: '单价',
          dataIndex: 'projectPrice',
          width: '30%',
          scopedSlots: { customRender: 'projectPrice' },
        },
        {
          title: '数量',
          dataIndex: 'quantity',
          width: '30%',
          scopedSlots: { customRender: 'quantity' },
        }
      ],
      url: {
        listMemberCard: this.$api.permission.memberCard.selectMemberCard,
        add: this.$api.permission.accountMemberCards.insert,
      }
    }
  },
  methods: {
    open () {
      this.form = {
        accountId: this.account.id
      }
      this.memberCardInfo = {}
      this.visible = true
      this.selectMemberCard()
    },
    onChangeBirth(date, dateString) {
      this.$set(this.form, 'beginTime', dateString)
    },
    selectMemberCard () {
      this.$post(this.url.listMemberCard, {}).then(res => {
        if (res.code === 200) {
          this.memberCardList = res.data
        }
      })
    },
    applyProjectOk () {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          if (this.form.memberCardId === '' || this.form.memberCardId === undefined) {
            this.$message.error('请选择会员卡')
            return
          }
          this.$post(this.url.add, this.form).then(res => {
            if (res.code === 200) {
              this.$message.success('新增成功')
              this.visible = false
              this.$emit('ModalOk')
            }
          })
        } else {
          return false
        }
      })
    },
    onChangeMemberCardIds (event) {
      this.memberCardInfo = this.memberCardList.find(item => item.id === event.target.value)
      console.log(this.memberCardInfo)
    }
  },
  created () {
  }
}
</script>

<style scoped>
.ry-modal .body-container .ant-form-item {
  margin-bottom: 0rem;
}
.ry-modal .body-container .ant-form-item-control {
  line-height: 0rem;
}
</style>
